<template>
  <div>
    <h3>pageonTwo页面 拖拽表单排序</h3>
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="竞赛项目">
        <div class="dragArea">
          <draggable
            v-model="form.projects"
            transition-duration="200"
            :props="{ handle: '.drag-handle' }"
            @end="onDragEnd"
          >
            <div
              class="domain_item hover_item drag-handle"
              v-for="(project, index) in form.projects"
              :key="'project' + index"
            >
              <span>竞赛项目{{ project.sort }}</span>
              <el-input
                @pointerdown.stop.native
                v-model="project.name"
                placeholder="请输入参赛项目"
              ></el-input>
              <el-button v-if="index != 0" @click.prevent="removeProject(project)">删除</el-button>
            </div>
          </draggable>
          <el-button @click="addProject">新增项目</el-button>
        </div>
      </el-form-item>
    </el-form>
    <div>
      <h3>鼠标右键点击事件</h3>
      <div>
        <!-- 绑定右键点击事件 -->
        <div @contextmenu.prevent="toggleVisibility">Right-click me to toggle visibility</div>

        <!-- 要控制显示和隐藏的元素 -->
        <div v-show="isVisible">This element is {{ isVisible ? "visible" : "hidden" }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  props: {},
  components: {
    draggable,
  },
  data() {
    return {
      isVisible: true,
      items: [
        { id: 1, text: "Item 1" },
        { id: 2, text: "Item 2" },
        { id: 3, text: "Item 3" },
      ],
      // 表单参数
      form: {
        projects: [
          {
            name: "",
            sort: 1,
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  // methods: {},
  methods: {
    toggleVisibility() {
      // 切换 isVisible 的值，控制元素的显示和隐藏
      this.isVisible = !this.isVisible;
    },
    handleRightClick(event) {
      // 阻止默认的右键菜单
      event.preventDefault();

      // 处理右键点击逻辑
      console.log("右键点击了！");
    },
    dragStart(event) {
      // 拖拽开始时的逻辑
    },
    dragEnd(event) {
      // 拖拽结束时的逻辑
    },
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      // 使用Vue的transition结束回调(done)确保样式被正确更新
      this.$nextTick(() => {
        el.offsetHeight; // 触发重绘
        el.style.transition = "opacity 0.5s";
        el.style.opacity = 1;
        done();
      });
    },
    leave(el, done) {
      el.style.transition = "opacity 0.5s";
      el.style.opacity = 0;
      done();
    },
    /** 拖拽结束 */
    onDragEnd(event) {
      this.form.projects.forEach((project, index) => {
        project.sort = index + 1;
      });
      console.log("拖拽结束", this.form.projects);
    },
    /**新增项目 */
    addProject() {
      this.form.projects.push({
        name: "",
        sort: this.form.projects.length + 1,
      });
    },
    /** 删除竞赛 */
    removeProject(item) {
      var index = this.form.projects.indexOf(item);
      if (index !== -1) {
        this.form.projects.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.dragArea {
  width: 85%;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px 10px;
  .domain_item {
    width: 100%;
    border: 1px dashed #ccc;
    border-radius: 10px;
    padding: 0px 10px 10px 10px;
    margin-bottom: 15px;
    :deep(.el-input) {
      margin-top: 10px;
    }
    :deep(.el-button) {
      margin-top: 10px;
    }
  }
}
.hover_item:hover {
  border-color: #1890ff;
}

.list-transition-enter-active,
.list-transition-leave-active {
  transition: opacity 0.5s;
}
.list-transition-enter,
.list-transition-leave-to {
  opacity: 0;
}
.drag-item {
  background-color: #f0f0f0;
  margin: 5px;
  padding: 10px;
  cursor: grab;
}
</style>
